<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic {
            height: 50px;
            width: 50px;
            background-color: yellow;
        }

        .happy {}

        .sad {}
    </style>
</head>

<body>

    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div id="root" class="basic" :class="mood" @click="changeMood">{{name}}</div>

    <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
    <div id="root" class="basic" :class="classArr" @click="changeMood">{{name}}</div>

    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    <div id="root" class="basic" :class="classObj" @click="changeMood">{{name}}</div>

    <!-- 绑定style样式--数组写法 -->
    <div id="root" class="basic" :style="styleObj">{{name}}</div>


    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                name: '呃呃呃',
                mood: 'happy',
                classArr: ['happy', 'sad'],
                classObj: {
                    happy: false,
                    sad: false
                },
                styleObj: {
                    fontSize: '40px',
                    color: 'red'
                }
            },
            methods: {
                changeMood() {
                    this.mood = 'sad'
                }
            },
        })
    </script>

</body>

</html>